<div id="signinModal" class="modal hide fade" data-backdrop="static" data-keyboard="false">
  <div class="modal-header">
    <h3>Sign In</h3>
  </div>
  <form id="signinForm" class="form-vertical">
  <div class="modal-body">
      <div class="form-group">
        <label for="signinUsername">Username:</label>
        <input type="text" class="form-control" id="signinUsername" autofocus/>
      </div>
      <div class="form-group">
        <label for="signinPassword">Password:</label>
        <input type="password" class="form-control" id="signinPassword" />
      </div>
  </div>
  <div class="modal-footer">
    <button id="signinButton" type="submit" class="btn btn-primary" data-loading-text="<i class='icon-refresh'></i> Signing-In...">Sign In</button>
  </div>
  </form>
</div>

<script type="text/javascript">
$(function() {
  $('#signinModal').on('shown', function(event) {
    $(event.target).find('#signinUsername').trigger('focus');
  });

  $('#signinForm').on('submit', function(event) {
    event.preventDefault();
    var signinForm = $(event.target);
    $.post('signin', {
      "username": signinForm.find('#signinUsername').val(),
      "password": signinForm.find('#signinPassword').val()
    }).done(function (data, status) {
      signinForm.trigger('reset');
      if ((status !== 'success') || !data || !data.ok) {
        signinForm.find('#signinUsername').trigger('focus');
        return alert("Sign-In Failed");
      }
      sessionStorage.setItem('redisCommanderBearerToken', data.bearerToken);
      sessionStorage.setItem('redisCommanderQueryToken', data.queryToken);
      $(window).off('beforeunload');
      location.reload();
    }).fail(function(err) {
      signinForm.trigger('reset');
      console.error("Failed", err);
      signinForm.find('#signinUsername').trigger('focus');
      return alert("Failed to send request");
    })
  });
})
</script>

